<template>
	<div class="lifeServer">
		<div class="left">
			<span>生</span>
			<span>活</span>
			<span>服</span>
			<span>务</span>
		</div>
		<div class="right">
			<div class="list-item" v-for="l in 15" :key="l">
				<span>1233</span>
			</div>
			
		</div>

	</div>
</template>

<script>
	export default {
		name: "lifeServer",
		components: {

		},
		data() {
			return {

			}
		},


	}
</script>

<style scoped lang="less">
	.lifeServer {
		background-color: #fff;
		padding: 2rem;
		display: flex;
		justify-content: space-between;

		.left {
			width: 1.81rem;
			height: 4.75rem;
			background: rgba(254, 119, 0, 1);
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-right: 1.06rem;

			span {
				font-size: 0.81rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}

		.right {
			flex: 1;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.list-item {
				font-size: 0.75rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(95, 95, 95, 1);
				margin-right: 1.06rem;
			}
		}
	}
</style>
